<template>
  <div style="margin-top: 10px">
    <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
      <!--    全部-->
      <el-tab-pane label="全部订单" name="all">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
          <el-table-column align="center" prop="id" label="订单编号" width="150"> </el-table-column>
          <el-table-column align="center" prop="spuName" label="商品名" width="150">
            <template slot-scope="scope">
              <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
                <el-tooltip class="item" effect="dark" content="点击查看商品" placement="top">
                  <el-tag size="large" @click="goSpu(scope.row?.spuId)">{{ scope.row.spuName }} </el-tag>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="payPrice" label="总价(￥)" width="100"></el-table-column>
          <el-table-column align="center" prop="user.username" label="下单人" width="100">
            <template slot-scope="scope">
              <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
                <el-tooltip class="item" effect="dark" :content="'下单人电话:' + scope.row.user.phone" placement="top">
                  <el-tag size="large">{{ scope.row.user.username }} </el-tag>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="linkUser" label="收货人" width="100">
            <template slot-scope="scope">
              <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
                <el-tooltip class="item" effect="dark" :content="'收货人电话:' + scope.row.linkPhone" placement="top">
                  <el-tag size="large">{{ scope.row.linkUser }} </el-tag>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="linkAddress" label="送货地址" width="200">
            <template slot-scope="scope">
              <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
                {{ scope.row.linkAddress }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="stateName" label="状态" width="100"></el-table-column>
          <el-table-column align="center" prop="createTime" label="创建时间"></el-table-column>
          <el-table-column align="center" prop="updateTime" label="更新时间"></el-table-column>
          <el-table-column align="center" fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="success" size="small" @click="showDetail(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <!--      未支付-->
      <el-tab-pane label="待付款" name="0" style="margin-top: 10px">
        <template #label>
          <div class="tab-pane-head">
            <div>未支付</div><el-badge :value="countMap?.未支付" v-show="countMap?.未支付 > 0" />
          </div>
        </template>
        <el-row style="display: flex; justify-content: right; align-items: center"><el-link
            type="danger">超时半小时未支付自动取消订单</el-link></el-row>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
          <el-table-column align="center" prop="id" label="订单编号" width="150"> </el-table-column>
          <el-table-column align="center" prop="spuName" label="商品名" width="150">
            <template slot-scope="scope">
              <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
                <el-tooltip class="item" effect="dark" content="点击查看商品" placement="top">
                  <el-tag size="large" @click="goSpu(scope.row?.spuId)">{{ scope.row.spuName }} </el-tag>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="payPrice" label="总价(￥)" width="100"></el-table-column>
          <el-table-column align="center" prop="user.username" label="下单人" width="100">
            <template slot-scope="scope">
              <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
                <el-tooltip class="item" effect="dark" :content="'下单人电话:' + scope.row.user.phone" placement="top">
                  <el-tag size="large">{{ scope.row.user.username }} </el-tag>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="linkUser" label="收货人" width="100">
            <template slot-scope="scope">
              <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
                <el-tooltip class="item" effect="dark" :content="'收货人电话:' + scope.row.linkPhone" placement="top">
                  <el-tag size="large">{{ scope.row.linkUser }} </el-tag>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="linkAddress" label="送货地址" width="200">
            <template slot-scope="scope">
              <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
                {{ scope.row.linkAddress }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="stateName" label="状态" width="100"></el-table-column>
          <el-table-column align="center" prop="createTime" label="创建时间"></el-table-column>
          <el-table-column align="center" prop="updateTime" label="更新时间"></el-table-column>
          <el-table-column align="center" fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" class="option-btn" @click="showDetail(scope.row)">详情</el-button>
              <el-button type="success" size="mini" class="option-btn" @click="goPay(scope.row)">支付</el-button>
              <el-button type="info" size="mini" class="option-btn" @click="cancelOrder(scope.row)">取消</el-button>

            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <!-- 待发货 -->
      <el-tab-pane label="待付款" name="1" style="margin-top: 10px">
        <template #label>
          <div class="tab-pane-head">
            <div>待发货</div><el-badge :value="countMap?.待发货" v-show="countMap?.待发货 > 0" />
          </div>
        </template>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
          <el-table-column align="center" prop="id" label="订单编号" width="150"> </el-table-column>
          <el-table-column align="center" prop="spuName" label="商品名" width="150">
            <template slot-scope="scope">
              <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
                <el-tooltip class="item" effect="dark" content="点击查看商品" placement="top">
                  <el-tag size="large" @click="goSpu(scope.row?.spuId)">{{ scope.row.spuName }} </el-tag>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="payPrice" label="总价(￥)" width="100"></el-table-column>
          <el-table-column align="center" prop="user.username" label="下单人" width="100">
            <template slot-scope="scope">
              <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
                <el-tooltip class="item" effect="dark" :content="'下单人电话:' + scope.row.user.phone" placement="top">
                  <el-tag size="large">{{ scope.row.user.username }} </el-tag>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="linkUser" label="收货人" width="100">
            <template slot-scope="scope">
              <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
                <el-tooltip class="item" effect="dark" :content="'收货人电话:' + scope.row.linkPhone" placement="top">
                  <el-tag size="large">{{ scope.row.linkUser }} </el-tag>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="linkAddress" label="送货地址" width="200">
            <template slot-scope="scope">
              <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
                {{ scope.row.linkAddress }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="stateName" label="状态" width="100"></el-table-column>
          <el-table-column align="center" prop="createTime" label="创建时间"></el-table-column>
          <el-table-column align="center" prop="updateTime" label="更新时间"></el-table-column>
          <el-table-column align="center" fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" class="option-btn" @click="showDetail(scope.row)">详情</el-button>

            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <!-- 运输中 -->
      <el-tab-pane label="运输中" name="2" style="margin-top: 10px">
        <template #label>
          <div class="tab-pane-head">
            <div>运输中</div><el-badge :value="countMap?.已发货" v-show="countMap?.已发货 > 0" />
          </div>
        </template>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
          <el-table-column align="center" prop="id" label="订单编号" width="150"> </el-table-column>
          <el-table-column align="center" prop="spuName" label="商品名" width="150">
            <template slot-scope="scope">
              <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
                <el-tooltip class="item" effect="dark" content="点击查看商品" placement="top">
                  <el-tag size="large" @click="goSpu(scope.row?.spuId)">{{ scope.row.spuName }} </el-tag>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="payPrice" label="总价(￥)" width="100"></el-table-column>
          <el-table-column align="center" prop="user.username" label="下单人" width="100">
            <template slot-scope="scope">
              <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
                <el-tooltip class="item" effect="dark" :content="'下单人电话:' + scope.row.user.phone" placement="top">
                  <el-tag size="large">{{ scope.row.user.username }} </el-tag>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="linkUser" label="收货人" width="100">
            <template slot-scope="scope">
              <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
                <el-tooltip class="item" effect="dark" :content="'收货人电话:' + scope.row.linkPhone" placement="top">
                  <el-tag size="large">{{ scope.row.linkUser }} </el-tag>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="linkAddress" label="送货地址" width="200">
            <template slot-scope="scope">
              <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
                {{ scope.row.linkAddress }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="stateName" label="状态" width="100"></el-table-column>
          <el-table-column align="center" prop="createTime" label="创建时间"></el-table-column>
          <el-table-column align="center" prop="updateTime" label="更新时间"></el-table-column>
          <el-table-column align="center" fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" class="option-btn" @click="showDetail(scope.row)">详情</el-button>

            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <!--      待收货-->
      <el-tab-pane name="3">
        <template #label>
          <div class="tab-pane-head">
            <div>待收货</div><el-badge :value="countMap?.待收货" v-show="countMap?.待收货 > 0" />
          </div>
        </template>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
          <el-table-column align="center" prop="id" label="订单编号" width="150"> </el-table-column>
          <el-table-column align="center" prop="spuName" label="商品名" width="150">
            <template slot-scope="scope">
              <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
                <el-tooltip class="item" effect="dark" content="点击查看商品" placement="top">
                  <el-tag size="large" @click="goSpu(scope.row?.spuId)">{{ scope.row.spuName }} </el-tag>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="payPrice" label="总价(￥)" width="100"></el-table-column>
          <el-table-column align="center" prop="user.username" label="下单人" width="100">
            <template slot-scope="scope">
              <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
                <el-tooltip class="item" effect="dark" :content="'下单人电话:' + scope.row.user.phone" placement="top">
                  <el-tag size="large">{{ scope.row.user.username }} </el-tag>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="linkUser" label="收货人" width="100">
            <template slot-scope="scope">
              <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
                <el-tooltip class="item" effect="dark" :content="'收货人电话:' + scope.row.linkPhone" placement="top">
                  <el-tag size="large">{{ scope.row.linkUser }} </el-tag>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="linkAddress" label="送货地址" width="150">
            <template slot-scope="scope">
              <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
                {{ scope.row.linkAddress }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="stateName" label="状态" width="100"></el-table-column>
          <el-table-column align="center" prop="createTime" label="创建时间" ></el-table-column>
          <el-table-column align="center" prop="updateTime" label="更新时间" > </el-table-column>
          <el-table-column align="center" fixed="right" label="操作" width="130">
            <template slot-scope="scope">
              <el-button type="primary" size="small" class="option-btn" @click="showDetail(scope.row)">详 情</el-button>
              <el-button type="success" size="small" class="option-btn" @click="receive(scope.row)">收 货</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <!--      已完成-->
      <el-tab-pane label="已完成" name="4">
        <template #label>
          <div class="tab-pane-head">
            <div>已完成</div><el-badge :value="countMap?.已收货" v-show="countMap?.已收货 > 0" />
          </div>
        </template>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
          <el-table-column align="center" prop="id" label="订单编号" width="150"> </el-table-column>
          <el-table-column align="center" prop="spuName" label="商品名" width="150">
            <template slot-scope="scope">
              <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
                <el-tooltip class="item" effect="dark" content="点击查看商品" placement="top">
                  <el-tag size="large" @click="goSpu(scope.row?.spuId)">{{ scope.row.spuName }} </el-tag>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="payPrice" label="总价(￥)" width="100"></el-table-column>
          <el-table-column align="center" prop="user.username" label="下单人" width="100">
            <template slot-scope="scope">
              <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
                <el-tooltip class="item" effect="dark" :content="'下单人电话:' + scope.row.user.phone" placement="top">
                  <el-tag size="large">{{ scope.row.user.username }} </el-tag>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="linkUser" label="收货人" width="100">
            <template slot-scope="scope">
              <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
                <el-tooltip class="item" effect="dark" :content="'收货人电话:' + scope.row.linkPhone" placement="top">
                  <el-tag size="large">{{ scope.row.linkUser }} </el-tag>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="linkAddress" label="送货地址" width="200">
            <template slot-scope="scope">
              <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
                {{ scope.row.linkAddress }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="stateName" label="状态" width="100"></el-table-column>
          <el-table-column align="center" prop="createTime" label="创建时间"></el-table-column>
          <el-table-column align="center" prop="updateTime" label="更新时间"></el-table-column>
          <el-table-column align="center" fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="primary" size="small" class="option-btn" @click="showDetail(scope.row)">详 情</el-button>
              <el-button type="success" size="small" class="option-btn" @click="showComment(scope.row)">评 价</el-button>
              <el-button type="danger" size="small" class="option-btn" @click="showReturn(scope.row)">申请退货</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <!--      申请退货-->
      <el-tab-pane label="已完成" name="-1">
        <template #label>
          <div class="tab-pane-head">
            <div>申请退货</div><el-badge :value="countMap?.申请退货" v-show="countMap?.申请退货 > 0" />
          </div>
        </template>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
          <el-table-column align="center" prop="id" label="订单编号" width="150"> </el-table-column>
          <el-table-column align="center" prop="spuName" label="商品名" width="150">
            <template slot-scope="scope">
              <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
                <el-tooltip class="item" effect="dark" content="点击查看商品" placement="top">
                  <el-tag size="large" @click="goSpu(scope.row?.spuId)">{{ scope.row.spuName }} </el-tag>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="payPrice" label="总价(￥)" width="100"></el-table-column>
          <el-table-column align="center" prop="user.username" label="下单人" width="100">
            <template slot-scope="scope">
              <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
                <el-tooltip class="item" effect="dark" :content="'下单人电话:' + scope.row.user.phone" placement="top">
                  <el-tag size="large">{{ scope.row.user.username }} </el-tag>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="linkUser" label="收货人" width="100">
            <template slot-scope="scope">
              <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
                <el-tooltip class="item" effect="dark" :content="'收货人电话:' + scope.row.linkPhone" placement="top">
                  <el-tag size="large">{{ scope.row.linkUser }} </el-tag>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="linkAddress" label="送货地址" width="200">
            <template slot-scope="scope">
              <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
                {{ scope.row.linkAddress }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="stateName" label="状态" width="100"></el-table-column>
          <el-table-column align="center" prop="createTime" label="创建时间"></el-table-column>
          <el-table-column align="center" prop="updateTime" label="更新时间"></el-table-column>
          <el-table-column align="center" fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="primary" size="small" class="option-btn" @click="showDetail(scope.row)">详 情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <!--      已退货-->
      <el-tab-pane label="已退货" name="-2">
        <template #label>
          <div class="tab-pane-head">
            <div>已退货</div>
          </div>
        </template>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
          <el-table-column align="center" prop="id" label="订单编号" width="150"> </el-table-column>
          <el-table-column align="center" prop="spuName" label="商品名" width="150">
            <template slot-scope="scope">
              <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
                <el-tooltip class="item" effect="dark" content="点击查看商品" placement="top">
                  <el-tag size="large" @click="goSpu(scope.row?.spuId)">{{ scope.row.spuName }} </el-tag>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="payPrice" label="总价(￥)" width="100"></el-table-column>
          <el-table-column align="center" prop="user.username" label="下单人" width="100">
            <template slot-scope="scope">
              <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
                <el-tooltip class="item" effect="dark" :content="'下单人电话:' + scope.row.user.phone" placement="top">
                  <el-tag size="large">{{ scope.row.user.username }} </el-tag>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="linkUser" label="收货人" width="100">
            <template slot-scope="scope">
              <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
                <el-tooltip class="item" effect="dark" :content="'收货人电话:' + scope.row.linkPhone" placement="top">
                  <el-tag size="large">{{ scope.row.linkUser }} </el-tag>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="linkAddress" label="送货地址" width="200">
            <template slot-scope="scope">
              <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
                {{ scope.row.linkAddress }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="stateName" label="状态" width="100"></el-table-column>
          <el-table-column align="center" prop="createTime" label="创建时间"></el-table-column>
          <el-table-column align="center" prop="updateTime" label="更新时间"></el-table-column>
          <el-table-column align="center" fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="primary" size="small" class="option-btn" @click="showDetail(scope.row)">详 情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

    </el-tabs>
    <!-- 分页 -->
    <div style="display: flex; justify-content: right; align-items: center; margin-top: 10px">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
        :page-size="pageSize" :page-sizes="[2, 5, 10]" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <!-- 订单详情弹窗  -->
    <el-dialog title="订单详情" :visible.sync="showDetailDialog" width="50%" center>
      <!-- 状态 -->
      <el-steps :active="orderVO?.state + 1" align-center finish-status="success" process-status="wait">
        <el-step title="已下单"></el-step>
        <el-step title="已支付"></el-step>
        <el-step title="已发货"></el-step>
        <el-step title="已到达"></el-step>
        <el-step title="已收货"></el-step>
        <el-step title="已评价"></el-step>
      </el-steps>
      <!-- 下单人联系方式 -->
      <el-card shadow="never">
        <template #header>
          <div class="card-header-title">
            <strong class="title">下单人信息</strong>
          </div>
        </template>
        <el-row class="info">

          <el-col :span="6">
            下单人: {{ orderVO.user?.nickName }}
          </el-col>
          <el-col :span="6">
            联系电话: {{ orderVO.user?.phone }}
          </el-col>
          <el-col :span="6">
            邮箱: {{ orderVO.user?.email }}
          </el-col>
        </el-row>
      </el-card>

      <!-- 收货人联系方式 -->
      <el-card shadow="never">
        <template #header>
          <div class="card-header-title">
            <strong>收货人信息</strong>
          </div>
        </template>
        <el-row class="info">
          <el-col :span="8">
            收货人: {{ orderVO?.linkUser }}
          </el-col>
          <el-col :span="8">
            联系电话: {{ orderVO?.linkPhone }}
          </el-col>
          <el-col :span="8">
            送货地址: {{ orderVO?.linkAddress }}
          </el-col>
        </el-row>
      </el-card>

      <!-- 订单详情 -->
      <el-card shadow="never">
        <template #header>
          <div class="card-header-title">
            <strong class="title">订单明细</strong>
          </div>
        </template>
        <el-row class="info">
          <el-col :span="8">
            订单编号: <el-tag type="primary" size="large">{{ orderVO?.id }}</el-tag>
          </el-col>
          <el-col :span="8">
            商品名称: <el-tag type="success" size="large">{{ orderVO?.spuName }}</el-tag>
          </el-col>
          <el-col :span="8">
            商品数量: <el-tag>{{ orderVO?.count }}</el-tag>
          </el-col>
        </el-row>
        <!-- 订单状态 -->
        <el-row>
          <el-col :span="8">
            订单状态: <el-tag type="success" size="large" v-if="orderVO?.state >= 1">{{ orderVO?.stateName }}</el-tag>
            <el-tag type="warning" size="large" v-else>{{ orderVO?.stateName }}</el-tag>
          </el-col>
          <el-col :span="8">
            下单时间: <el-tag type="primary" size="large">{{ orderVO?.unpaidTime }}</el-tag>
          </el-col>
          <el-col :span="8">
            支付时间: <el-tag type="primary" size="large" v-if="orderVO?.state >= 1">{{ orderVO?.preDeliveryTime
              }}</el-tag>
          </el-col>
          <el-col :span="8">
            发货时间: <el-tag type="primary" size="large" v-if="orderVO?.state >= 2">{{ orderVO?.deliveryTime }}</el-tag>
          </el-col>
          <el-col :span="8">
            到达时间: <el-tag type="primary" size="large" v-if="orderVO?.state >= 3">{{ orderVO?.preReceiveTime }}</el-tag>
          </el-col>
          <el-col :span="8">
            完成时间: <el-tag type="success" size="large" v-if="orderVO?.state >= 4">{{ orderVO?.receiveTime }}</el-tag>
          </el-col>
        </el-row>

        <el-card shadow="never">
          <template #header>
            <div style="display: flex; justify-content: center; align-items: center;">
              <strong>商品详情</strong>
            </div>
          </template>
          <el-tag :hit="true">{{ orderVO?.detail?.size }}</el-tag>
          <el-tag :hit="true">{{ orderVO?.detail?.color }}</el-tag>
        </el-card>
        <!-- 订单价格 -->
        <el-row class="info" style="">
          <el-col :span="6">
            单价: <el-tag type="primary" size="large">{{ orderVO?.price }}</el-tag>￥/双
          </el-col>
          <el-col :span="6">
            总价格: <el-tag type="primary" size="large">{{ orderVO?.totalPrice }}</el-tag>￥
          </el-col>
          <el-col :span="6">
            实际售价: <el-tag type="success" size="large">{{ orderVO?.salePrice }}</el-tag>￥/双
          </el-col>
          <el-col :span="6">
            实际付款: <el-tag type="success" size="large">{{ orderVO?.payPrice }}</el-tag>￥
          </el-col>
          <el-col :span="6">
            付款方式: <el-tag type="warning " size="large" v-if="orderVO?.state >= 1 || orderVO?.state <= -1">{{
              orderVO?.payMethod }}</el-tag>
          </el-col>
        </el-row>
      </el-card>
      <el-card shadow="never" v-if="orderVO?.state < 0">
        <template #header>
          <div style="display: flex; justify-content: center; align-items: center;">
            <strong>退货原因</strong>
          </div>
        </template>
        <p>{{ orderVO?.returnReason || '七天无理由退换' }}</p>
      </el-card>
      <template #footer>
        <el-button type="success" @click="showDetailDialog = false">关 闭</el-button>
      </template>
    </el-dialog>

    <!-- 评价 弹窗 -->
    <el-dialog title="商品评价" :visible="showCommentDialog" width="50%" center>
      <el-card shadow="never">
        <template #header>
          <div class="card-header-title">
            <strong class="title">商品信息</strong>
          </div>
        </template>
        <el-row>
          <el-col :span="24">
            商品名称: <el-tag type="primary" size="large">{{ orderVO?.spuName }}</el-tag>
          </el-col>
          <el-col :span="8">
            商品售价: <el-tag type="primary" size="large">{{ orderVO?.salePrice }}￥/双</el-tag>
          </el-col>
          <el-col :span="8">
            商品详情:
            <el-tag :hit="true">{{ orderVO?.detail?.size }}</el-tag>
            <el-tag :hit="true">{{ orderVO?.detail?.color }}</el-tag>
            <!-- <el-tag :hit="true" >{{ orderVO?.detail }}</el-tag> -->
          </el-col>
          <el-col :span="8">
            总计支付: <el-tag type="primary" size="large">{{ orderVO?.payPrice }}￥</el-tag>
          </el-col>
          <el-col :span="8">
            支付方式: <el-tag type="primary" size="large">{{ orderVO?.payMethod }}</el-tag>
          </el-col>
          <el-col :span="8">
            完成时间: <el-tag type="success" size="large">{{ orderVO?.receiveTime }}</el-tag>
          </el-col>

        </el-row>
      </el-card>
      <el-row class="card-header-title">
        <el-tag type="success" size="small" round effect="plain" style="margin-right: 10px;">评分</el-tag><el-rate
          v-model="sComment.rate" :max=5 allow-half></el-rate>
      </el-row>

      <el-row class="card-header-title">
        <el-tag type="primary" size="small" round effect="plain" style="margin-right: 10px;">评价内容</el-tag>
        <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="sComment.content"></el-input>
      </el-row>
      <el-row class="card-header-title" style="margin-top: 10px;">
        <el-button type="info" @click="resetComment">取消</el-button>
        <el-button type="success" @click="saveComment">提交</el-button>
      </el-row>
    </el-dialog>

    <!-- 退货 弹窗 -->
    <el-dialog title="商品评价" :visible="showReturnDialog" width="50%" center>
      <el-card shadow="never">
        <template #header>
          <div class="card-header-title">
            <strong class="title">商品信息</strong>
          </div>
        </template>
        <el-row>
          <el-col :span="24">
            商品名称: <el-tag type="primary" size="large">{{ orderVO?.spuName }}</el-tag>
          </el-col>
          <el-col :span="8">
            商品售价: <el-tag type="primary" size="large">{{ orderVO?.salePrice }}￥/双</el-tag>
          </el-col>
          <el-col :span="8">
            商品详情:
            <el-tag :hit="true">{{ orderVO?.detail?.size }}</el-tag>
            <el-tag :hit="true">{{ orderVO?.detail?.color }}</el-tag>
            <!-- <el-tag :hit="true">{{ orderVO?.detail }}</el-tag> -->
          </el-col>
          <el-col :span="8">
            总计支付: <el-tag type="primary" size="large">{{ orderVO?.payPrice }}￥</el-tag>
          </el-col>
          <el-col :span="8">
            支付方式: <el-tag type="primary" size="large">{{ orderVO?.payMethod }}</el-tag>
          </el-col>
          <el-col :span="8">
            完成时间: <el-tag type="success" size="large">{{ orderVO?.receiveTime }}</el-tag>
          </el-col>

        </el-row>
      </el-card>
      <!-- 退货原因 -->
      <el-row class="card-header-title">
        退货原因:
        <el-select v-model="prefixReason" placeholder="请选择">
          <el-option v-for="item in reasons" :key="item" :value="item">
          </el-option>
        </el-select>
      </el-row>

      <el-row class="card-header-title">
        <el-tag type="primary" size="small" round effect="plain" style="margin-right: 10px;">退货原因内容</el-tag>
        <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="detailReason"></el-input>
      </el-row>
      <el-row class="card-header-title" style="margin-top: 10px;">
        <el-button type="info" @click="resetReason">取消</el-button>
        <el-button type="success" @click="returnOrder">申请退货</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { addComment } from '@/api/sComment'
import { userSOrderPage, sOrderCancel, sOrderReceive, sOrderCount, sOrderPreReturn } from "@/api/sOrder";
import { prePay } from '@/api/pay'
import { getUser } from "@/utils/storage";
import { getSpuById } from "@/api/goods";
export default {
  name: "order",
  data() {
    return {
      user: {},
      pageNum: 1,
      pageSize: 5,
      total: 0,
      activeName: 'all',
      tableData: [],
      state: '',
      orderVO: {},
      showDetailDialog: false,
      showCommentDialog: false,
      showReturnDialog: false,
      showPayDialog: false,
      sComment: {
        orderId: '',
        userId: '',
        rate: 5,
        spuId: '',
        detail: '',
        content: '',
      },
      countMap: {},
      reasons: ['七天无理由退货', '八天有理由退货', '质量问题', '其他'],
      prefixReason: '',
      detailReason: ''
    }
  },
  created() {
    this.user = getUser()
    if (!this.user.id) {
      this.$message({
        type: 'warning',
        message: '请登录！'
      })
      return
    }
    this.load()
  },
  methods: {
    handleClick(tab) {
      if (tab.name === 'all') {
        this.state = ''
        this.load()
        return
      }
      this.state = tab.name
      this.load()
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.load()
    },
    async load() {
      const res = await userSOrderPage({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        userId: this.user.id,
        state: this.state
      })
      this.tableData = res.data?.records
      // 按照状态的升序和时间的降序排序
      this.tableData.sort((a, b) => a.state - b.state)
      this.pageNum = res.data?.current
      this.total = res.data?.total
      console.log(this.tableData)
      const { data } = await sOrderCount(this.user?.id)
      this.countMap = data
      console.log(this.countMap)
    },
    showDetail(orderVO) {
      this.orderVO = JSON.parse(JSON.stringify(orderVO))
      const detail = JSON.parse(this.orderVO.detail)
      this.orderVO.detail = { size: detail.size, color: detail.color }
      this.showDetailDialog = true
    },
    showComment(orderVO) {
      // this.orderVO = orderVO
      this.orderVO = JSON.parse(JSON.stringify(orderVO))
      const detail = JSON.parse(this.orderVO.detail)
      this.orderVO.detail = { size: detail.size, color: detail.color }
      this.showCommentDialog = true
    },
    async saveComment() {
      this.sComment.orderId = this.orderVO?.id
      this.sComment.userId = this.user?.id
      this.sComment.spuId = this.orderVO?.spuId
      this.sComment.detail = JSON.stringify(this.orderVO?.detail)
      console.log(this.sComment)
      await addComment(this.sComment)
      this.$message.success('评价提交成功')
      this.resetComment()
      this.load()
    },
    resetComment() {
      this.sComment = {
        orderId: '',
        userId: this.user?.id,
        rate: 5,
        content: '',
        detail: '',
        spuId: ''
      }
      this.showCommentDialog = false
    },
    async showReturn(orderVO) {
      // this.orderVO = orderVO
      this.orderVO = JSON.parse(JSON.stringify(orderVO))
      const detail = JSON.parse(this.orderVO.detail)
      this.orderVO.detail = { size: detail.size, color: detail.color }
      this.showReturnDialog = true
    },
    resetReason() {
      this.prefixReason = ''
      this.detailReason = ''
      this.showReturnDialog = false
    },
    async returnOrder() {
      await this.$confirm('确定申请退货?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await sOrderPreReturn({ orderId: this.orderVO.id, reason: this.prefixReason + ' ' + this.detailReason })
        this.load()
        this.$message({
          type: 'success',
          message: '已申请退货！'
        });
        this.resetReason()
        this.load()
      }).catch(() => { })
    },
    async goPay(orderVO) {
      const { data: aliPay } = await prePay([orderVO])
      console.log(aliPay)
      this.$router.push({
        name: 'Pay',
        params: {
          aliPay: aliPay
        }
      })
    },
    goSpu(spuId) {
      getSpuById(spuId).then(res => {
        if (res.code === '0') {
          this.$store.commit('spu/setSelectedSpu', res.data)
          this.$router.push("/front/goods")
        }
      })
    },
    async receive(orderVO) {
      await this.$confirm('是否确认收货', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success'
      }).then(async () => {
        await sOrderReceive(orderVO.id)
        this.$message({
          type: 'success',
          message: '已收货'
        });
        this.load()
      }).catch(() => { })
    },
    async cancelOrder(orderVO) {
      await this.$confirm('是否取消订单', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await sOrderCancel(orderVO.id)
        this.$message({
          type: 'success',
          message: '已取消订单!'
        });
        await this.load()
      }).catch(() => { })
    },

  }
}
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.option-btn {
  padding: 5px;
  font-size: 12px
}

.card-header-title {
  display: flex;
  justify-content: center;
  align-content: center;
  font-size: 20px;
}

.tab-pane-head {
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center
}
</style>
